<template>
<h2>{{car.brand}}价格：{{car.price}}万</h2>
  <button @click="changeBrand">修改汽车的品牌</button>
  <button @click="changePrice">修改汽车的价格</button>
  <button @click="changeCar">修改汽车</button>
  <h2>
    游戏列表
  </h2>
  <ul>
    <li v-for="game in games" :key="game.id">{{game.name}}</li>
  </ul>
  <button @click="games.push({id:4,name:'绝地求生'})">添加游戏</button>
  <button @click="changeFirstGame">修改第一个游戏的名字</button>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>
<script setup lang="ts" name="Person">
import {ref,reactive} from 'vue'
let car =reactive({brand:'奔驰',price:100})
let games=ref([
  {id:1,name:"王者荣耀"},
  {id:2,name:"英雄联盟"},
  {id:3,name:"泰坦巨人"},
])
function changePrice(){
  car.price += 10
}
function changeBrand(){
  car.brand ="宝马"
}
function changeCar(){
  Object.assign(car,{brand:'保时捷',price:200})
}
function changeFirstGame(){
  games.value[0].name = '吃鸡'
}
</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  padding: 0 5px;
}
li{
  front-size: 20px;
}
</style>